<script setup lang="ts">
import { onMounted, ref } from "vue";

// 声明 props 类型
export interface variableFormProps {
  formInline: {
    dataKey: string;
    type: string;
    triggeringEvent: string;
    dataProcessing: string;
    decimalPlaces: number;
  };
}

const props = withDefaults(defineProps<variableFormProps>(), {
  formInline: () => ({
    dataKey: "",
    type: "",
    triggeringEvent: "",
    decimalPlaces: 0,
    dataProcessing: ""
  })
});
const typeOption = [
  { label: "bool", value: "bool" },
  { label: "Int", value: "Int" },
  { label: "Uint", value: "Uint" },
  { label: "Float", value: "Float" },
  { label: "Double", value: "Double" },
  { label: "int_64", value: "int_64" },
  { label: "uint_64", value: "uint_64" },
  { label: "String", value: "String" }
];
const newFormInline = ref(props.formInline);
onMounted(() => {
  // newFormInline.value.dataKey = "w00000";
  newFormInline.value.triggeringEvent = "Triggering";
  // newFormInline.value.dataProcessing = "";
  // newFormInline.value.decimalPlaces = 0;
  // newFormInline.value.type = "bool";
});
function typeChange(type) {
  if (type == "Float" || type == "Double") {
    newFormInline.value.decimalPlaces = 2;
  } else {
    newFormInline.value.decimalPlaces = 0;
  }
}
</script>

<template>
  <el-form :model="newFormInline" class="add_form">
    <el-form-item label="数据键名" prop="dataKey">
      <el-input
        v-model="newFormInline.dataKey"
        class="!w-[220px]"
        placeholder="请输入数据键名"
      />
    </el-form-item>
    <el-form-item label="类型" prop="type">
      <el-select
        v-model="newFormInline.type"
        class="!w-[220px]"
        placeholder="请选择"
        @change="typeChange(newFormInline.type)"
      >
        <el-option
          v-for="(item, index) in typeOption"
          :key="index"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="小数位" prop="decimalPlaces">
      <el-input
        v-model="newFormInline.decimalPlaces"
        class="!w-[220px]"
        placeholder="请输入小数位"
      />
    </el-form-item>
    <el-form-item label="事件处理" prop="dataProcessing">
      <el-input
        v-model="newFormInline.dataProcessing"
        class="!w-[220px]"
        placeholder="请输入事件处理"
        type="textarea"
      />
    </el-form-item>
    <el-form-item label="触发事件" prop="triggeringEvent">
      <el-input
        v-model="newFormInline.triggeringEvent"
        class="!w-[220px]"
        placeholder="请输入触发事件"
        type="textarea"
      />
    </el-form-item>
  </el-form>
</template>
<style lang="scss" scoped>
.add_form :deep(.el-form-item__label) {
  width: 130px !important;
}
</style>
